<script setup lang="ts">
import { ref } from 'vue'
const tabData = ref([{name:'价格',corner:123}, {name:'条码',corner:12}, {name:'销售',corner:93}, {name:'采购',corner:123}, {name:'哈哈哈哈',corner:0}, {name:'嘻嘻',corner:0} , {name:'库存',corner:0} ])
const industryTabIndex = ref(0)
const tabData2 = ref([{name:'价格',corner:123}, {name:'条码',corner:12}, {name:'销售',corner:93}, {name:'采购',corner:123}, {name:'哈哈哈哈',corner:0}, {name:'嘻嘻',corner:0} , {name:'库存',corner:0,icon:'settings',defaultIcon:'list'} ])
const industryTabIndex2 = ref(0)
const tabData3 = ref([{name:'价格',corner:123}, {name:'条码',corner:12}, {name:'销售',corner:93}, {name:'采购',corner:123}, {name:'哈哈哈哈',corner:0}, {name:'嘻嘻',corner:0} , {name:'库存',corner:0} ])
const industryTabIndex3 = ref(0)
const iconchange = ref(true)
const spaceLeft = ref(0)

const tabData4 = ref([{name:'收件箱',corner:0}, {name:'公文',corner:0}, {name:'企业新闻',corner:2} ])
const industryTabIndex4 = ref(0)
const tabstyle = ref({ justifyContent: 'flex-start'})

const tabChange = (e:Event) => {
  industryTabIndex.value = e;
}
const tabChange2 = (e:Event) => {
  industryTabIndex2.value = e;
}
const tabChange3 = (e:Event) => {
  industryTabIndex3.value = e;
}
const tabChange4 = (e:Event) => {
  industryTabIndex4.value = e;
}
const iconsClick2 = () => {
  iconchange.value = !iconchange.value;
}
const toggleFixed = ref(false);
</script>

<route lang="json">{
  "style": {
    "navigationBarTitleText": "Tab"
  }
}</route>

<template>
  <view class="main">
    <view>
      <h2>显示角标数据</h2>
      <eui-tab :tabs="tabData" :spaceLeft="spaceLeft" :value="industryTabIndex" :showBadge="true"
      @change="tabChange" :showBorderBottom="true" ></eui-tab>
    </view>
    <view style="margin-top: 50px;">
      <h2>显示icon图</h2>
      <eui-tab :tabs="tabData2" :spaceLeft="spaceLeft" :value="industryTabIndex2" :iconchange="iconchange" :showBadge="false"
      @change="tabChange2" @click="iconsClick2"></eui-tab>
    </view>
    <view style="margin-top: 50px;">
      <h2>更换主题色</h2>
      <eui-tab :tabs="tabData3" :spaceLeft="spaceLeft" :value="industryTabIndex3" :showBadge="true"
      @change="tabChange3" themeColor="rgb(255,148,0)"></eui-tab>
    </view>

    <view style="margin-top: 50px;">
      <h2>显示dot类型角标</h2>
      <eui-tab :tabs="tabData4" :spaceLeft="spaceLeft" :value="industryTabIndex4" :showBadge="true" badgeType="dot"
      @change="tabChange4" themeColor="rgb(0, 0, 0)" :tabStyle="tabstyle"></eui-tab>
    </view>

    <view style="margin-top: 50px;">
      <h2>显示展开选项</h2>
      <eui-tab
        :tabs="tabData"
        :spaceLeft="spaceLeft"
        :value="industryTabIndex"
        @change="tabChange"
        showFixed
        :height="88"
        :toggleFixed="toggleFixed"
        @update:toggleFixed="toggleFixed = $event"
      >
        <template v-slot:icons>
          <eui-icons type="bars" :size="13" color="#777" />
        </template> 
    </eui-tab>

    </view>
  </view>

</template>

<style lang="scss">
.main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #fff;
}
</style>
